<template>
	<view class="">
		<view @click='showChange' class="flex bg_a m-t">
			<view class="">
				{{text}}
			</view>
			<u-select v-model="show" :list="list" @confirm="confirm" value-name='id' label-name='feedback_name'>
			</u-select>
			<view class="r">
				<image src="../../static/right.png" alt="">
			</view>
		</view>
		<view class="bg_a m-t">
			<u-input v-model="user_info" placeholder="手机号/邮箱QQ（选填）" />
		</view>
		<view class="p_text">
			问题和意见（必填）
		</view>
		<view class="bg_a">
			<u-input v-model="content" placeholder="请简要描述您的问题和意见" />
		</view>
		<view class="p_text">
			上传图片（最多4张）
		</view>
		<view class="bg_a">
			<u-upload :show-progress="false"  max-count="3" name="file"
				@on-uploaded="onUploaded" @on-change="onChange"></u-upload>
		</view>
		<view class="btn" @click="bankCard">
			提交
		</view>
	</view>
</template>

<script>
	import Config from '@/core/config'
	const apiUrl = Config.get('apiUrl')
	import * as Api from '@/api/recovery'
	export default {
		data() {
			return {
				show: false,
				list: [{
						value: '1',
						label: '江'
					},
					{
						value: '2',
						label: '湖'
					}
				],
				action: apiUrl + '/upload/image',
				formData: {
					access_token:uni.getStorageSync('token')
				},
				fileList: [],
				name: '',
				value1: '',
				f_List: [],
				user_info: '',
				content: '',
				image_url: '',
				text: '请选择反馈类型'
			}
		},
		onLoad() {
			this.getFeekList()
		},
		methods: {
			showChange() {
				this.show = true
			},
			getFeekList() {
				Api.feedList({})
					.then(result => {
						console.log(result)
						this.list = result.data.list
					})
					.finally()

			},
			confirm(e) {
				console.log(e)
				this.f_List = e;
				this.text = e[0].label
			},
			// 上传成功
			onUploaded(res) {
				this.fileList = res;
				console.log(this.fileList);
			},
			// 无论成功失败都会触发
			onChange(res){
				let data = JSON.parse(res.data)
				console.log(res)
				
				UploadApi.image(file.images)
				  .then(fileIds => {
				    app.formData[index].uploaded = fileIds
				    resolve(fileIds)
				  })
				  .catch(reject)
				// if(data.code == 0){
				// 	console.log(data)
				// 	uni.showToast({
				// 		icon:'none',
				// 		title: data.msg,
				// 	});
				// }
			},
			// beforeUpload(index, list) {
			// 	// 返回一个promise
			// 	return new Promise((resolve, reject) => {
			// 		this.$u.post(apiUrl + '/upload/image').then(res => {
			// 			console.log(res)
			// 			// resolve()之后，将会进入promise的组件内部的then回调，相当于返回true
			// 			resolve();
			// 		}).catch(err => {
			// 			// reject()之后，将会进入promise的组件内部的catch回调，相当于返回false
			// 			reject();
			// 		})
			// 		Api.upImage({})
			// 			.then(result => {
			// 				console.log(result)
			// 				// this.content = result.data.detail.describe
			// 			})
			// 			.finally()
			// 	})
			// },
			bankCard() {
				Api.createFeedBack({
						feedback_id: this.f_List[0].value,
						feedback_name: this.f_List[0].label,
						user_id: uni.getStorageSync('userId'),
						user_info: this.user_info,
						content: this.content,
						image_url: this.image_url
					})
					.then(result => {
						console.log(result)
						this.$navTo('pages/user/index')
						// this.content = result.data.detail.describe
					})
					.finally()
			}
		}
	}
</script>

<style>
	.flex {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.btn {
		width: 686rpx;
		height: 88rpx;
		background: #66B347;
		border-radius: 44rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		margin: 0 auto;
		text-align: center;
		line-height: 88rpx;
		margin-top: 100rpx;
	}

	.bg_a {
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		padding: 32rpx 32rpx;
	}

	.p_text {
		padding: 32rpx;
		font-size: 32rpx;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		color: #000000;
	}

	.r {
		width: 16rpx;
		height: 27rpx;
	}

	.r image {
		width: 100%;
		height: 100%;
	}

	.m-t {
		margin-top: 20rpx;
	}
</style>
